<template>
<div >
  <el-container>
    <el-header class="el-header" height="150px">
      <div style="width: 100%;margin: 0 auto">
             <span :span="12">
            <img  src="../../public/static/picture/logo.jpg" style="width: 40px;height:40px;vertical-align: middle" alt="">
            </span>
            <span style="position: relative;top: 13px;margin-left:1px;font-size: x-large" >拾文博客</span>
            <span  style="float:right;">
              <el-button @click="publish" > <i class="el-icon-s-promotion" ></i>发布</el-button>
            </span>
        <el-dropdown :hide-on-click="false" style="float: right;font-size: 20px;color: #ffffff">
          <el-avatar style="vertical-align: center;overflow: hidden;margin-top: 10px;margin-right: 20px" :size="40" :src="avatarUrl"></el-avatar>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a href="javascript:void(0)" @click="login">{{log}}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>



        <span style="float:right;margin-right: 10px" v-if="Token.trim().length>0" >
              <el-badge :value="countAllSize" :max="99" class="item">
                  <i class="el-icon-message-solid" style="font-size:25px;position: relative;right:8px;top: 2px" @click="countAllSizeMountedClick"></i></el-badge>
            <el-divider direction="vertical"></el-divider>
            </span>

             <span   style="float:right;margin-right: 10px">
              <a @click="userCenter">个人中心</a>
              <el-divider direction="vertical"></el-divider>
            </span>

        <span style="float:right;margin-right: 10px">
             <a @click="localPage"> 首页</a>
            <el-divider direction="vertical"></el-divider>
            </span>

    </div>
  <!--*********蓝色导航条开始**********-->
  <div style="width:100%;height: 60px;background-color: #cedebd">
    <el-menu style="width: 100%;margin: 0 auto" mode="horizontal"
             :default-active="active" class="el-menu-demo"
             background-color="#cedebd"
             text-color="#fff"
             active-text-color="#fff"
             >
      <el-menu-item @click="categoryDetail(c.id)" v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
      <!--搜索框开始-->
      <div style="float: right;margin-right: -130px">
        <!--@keydown.native.enter回车键按下事件-->
        <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
      <!--搜索框结束-->
    </el-menu>
  </div>
    </el-header>
    <el-container>
      <el-main class="el-main" height="100%">
          <!--********轮播图和排行榜开始*********-->
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col >
              <el-carousel trigger="click" height="300px">
                <el-carousel-item v-for="b in bannerArr" >
                  <img :src="b.url" alt="" style="width: 100%">
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>

          <!--**********文章列表开始*********-->
          <el-row >
            <el-col  v-for="a in articleArr"    >
              <el-card  style="margin-bottom: 10px;height: 200px"   >
                <el-row >
                  <el-col :span="4" style="column-span: 3;" align="left" >
                      <img :src="a.viewPicture" @click="sentMesg(a.id)" width="120" height="130"  alt="" >
                  </el-col>
                  <el-col :span="18" align="left"  >
                    <h3 @click="sentMesg(a.id)">{{a.title}}</h3>
                  </el-col>
                  <el-col :span="18" align="left">
<!--                    <i class="el-icon-watch"></i>-->
<!--                    <span style="margin: 0 20px 0 0">{{a.gmtCreate}}发布</span>-->
                    <i class="el-icon-view"></i>
                    <span style="margin: 0 20px 0 0">{{a.viewCount}}人围观</span>
                    <i class="el-icon-chat-dot-round"></i>
                    <span style="margin: 0 20px 0 0">{{a.commentCount}}人评论</span>
                    <i class="el-icon-s-custom"></i>
                    <span style="margin: 0 20px 0 0">{{a.nick}}</span>
                  </el-col>
                  <!--    简述              -->
                  <el-col align="left" :span="18">
                    <h4 style="font-style: normal" @click="sentMesg(a.id)">{{a.brief}}</h4>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

          </el-row>

          <!--**********商品列表结束*********-->

        <!--分页区域-->
        <div class="block">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>

      </el-main>

              <!--  侧边栏    -->
      <el-aside  class="el-aside" width="400px" height="100%" style="">
        <!--    推荐文章    -->
        <el-card style="margin-top: 20px">
        <el-tabs  v-model="activeName"  @tab-click="handleClick(activeName)">
          <el-tab-pane label="最新文章"  name="first">
            <el-table :data="topArr" style="width: 400px">
              <el-table-column label="排名" type="index"  width="100">
              </el-table-column>
              <el-table-column prop="title" label="标题" width="200">
                <template slot-scope="scope">
                  <el-link  @click="sentMesg(scope.row.id)">{{ scope.row.title }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="热门文章" name="second">

            <el-table :data="topArr" style="width: 400px">
              <el-table-column   label="排名" type="index"  width="100">
              </el-table-column>
              <el-table-column  prop="title" label="标题" width="200">
                <template slot-scope="scope">
                  <el-link  @click="sentMesg(scope.row.id)">{{ scope.row.title }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="优选推荐" name="third">
            <el-table :data="topArr" style="width: 400px">
              <el-table-column label="排名" type="index"  width="100">
              </el-table-column>
              <el-table-column prop="title" label="标题" width="200">
                <template slot-scope="scope">
                  <el-link  @click="sentMesg(scope.row.id)">{{ scope.row.title }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        </el-card >
        <el-card align="left" style="margin-top: 20px">
          <i class="el-icon-s-promotion" ></i>
          <span>友情链接</span>
        </el-card>
        <el-card align="left">
          <div v-for="a in link" >
            <el-card >
              {{a.name}}
              <el-divider direction="vertical"></el-divider>
              <a :href="a.url">{{a.url}}</a>
            </el-card>
            <el-divider></el-divider>
          </div>
        </el-card>
      <!--      标签列表  -->
        <el-card align="left" style="margin-top: 20px">
          <i class="el-icon-edit" ></i>
          <span>标签列表</span>
        </el-card>
        <el-card align="left">
          <span  style="margin: 5px " v-for="a in tag" :index="a.id" >
            <el-tag  style="margin-bottom: 5px" @click="tagDetail(a.id)" >{{a.name}}</el-tag>
          </span>
        </el-card>
<!--    天气插件      -->
        <div style="width: 100%;margin-top: 20px" id="he-plugin-standard"></div>
        <!-- 站点信息       -->
        <el-card align="left" style="margin-top: 20px">
          <i class="el-icon-s-promotion" ></i>
          <span>站点信息</span>
        </el-card>
        <el-card align="left" >
            <el-card >
              文章总量
              <el-divider direction="vertical"></el-divider>
              {{ArticleCount}}
            </el-card>
            <el-divider></el-divider>
          <el-card >
            入驻用户
            <el-divider direction="vertical"></el-divider>
            {{UserCount}}
          </el-card>
        </el-card>
      </el-aside>
    </el-container>

  </el-container>
</div>
</template>

<script>
export default {

  data() {
    return {
      /*用户头像路径*/
      avatarUrl:'https://laochengdu.oss-cn-chengdu.aliyuncs.com/2022-07-18/66bac3e7-22da-49b4-b27d-23405739eafa.jpg',
      log:"登录",
      Token: "",
      /*总页数*/
      total:0,
      /*分页数量*/
      pageSize:6,
      active:"1",
      /*当前页码*/
      currentPage: 1,
      activeName: 'second',
      activeMessageName:'first',
      categoryArr:[],
      /*ES关键词搜索*/
      wd:"",
      /*用户信息*/
      userInfo:[],
      topArr:[],
      link:[],
      bannerArr:[],
      // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      articleArr:[],
      tag:[],
      /*发布文章数量*/
      ArticleCount:0,
      /*注册用户数量*/
      UserCount:0,
      countAllSize:'',    // 消息数量标记
    }
  },
  created:function () {

    /*判断jwt*/
    this.Token = localStorage.getItem("jwt")
    if(this.Token!=null||this.Token!=''){
      let url='http://localhost:9090/api/user/selectUser'
      this.axios.create({
            headers:{
              'Authorization':this.Token
            }
          }).get(url).then((response)=>{

        let json =response.data;
        if(json.code==200){
         this.avatarUrl=json.data.avatar
          this.log='退出登录'
        }else {

        }
      });

    }else{
      this.log='登录'
    }

    /*执行热门文章查询*/
   let url ='http://localhost:9090/api/articles/selectPopularArticle';
    this.axios.get(url).then((response)=> {
      this.topArr=response.data.data
      console.log(response)
    })

    /*执行文章分类查询*/
     url ='http://localhost:9090/api/category';
    this.axios.get(url).then((response)=> {
      console.log(response)
      this.categoryArr=response.data.data

    })

    /*执行标签查询*/
    url ='http://localhost:9090/api/tags/selectTagList';
    this.axios.get(url).then((response)=> {
      this.tag=response.data.data

    })

    /*执行最新友链查询*/
    url ='http://localhost:9090/api/link/newest';
    this.axios.get(url).then((response)=> {
      console.log(response)
      this.link=response.data.data

    })

    /*执行轮播图查询*/
    url ='http://localhost:9090/api/banner/list';
    this.axios.get(url).then((response)=> {
      console.log(response)
      this.bannerArr=response.data.data

    })

    /*文章分页查询*/
   this.ArticleQueryList();

   /*统计文章数量*/
    this.axios.get('http://localhost:9090/api/articles/articleCount').then((response)=>{
      console.log(response)
      this.ArticleCount=response.data.data
    })

    /*统计注册用户数量*/
    this.axios.get('http://localhost:9090/api/user/getUserCount').then((response)=>{
      console.log(response)
      this.UserCount=response.data.data
    })

    this.countAllSizeMounted();
  },
  mounted() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
    document.body.appendChild(s);
  },
  methods:{
    /*分页查询*/
    ArticleQueryList(){
      let url="http://localhost:9090/api/articles/selectArticleNumbers"
      this.axios.get(url).then((response)=> {
        console.log(response)
        this.total=response.data.data
      })
      /*查询文章列表*/
      url ='http://localhost:9090/api/articles/selectArticleLists';
     let data={
       pageNum:this.currentPage,
       size:this.pageSize
     }
      this.axios.post(url,data).then((response)=> {
        this.articleArr=response.data.data.list
      })
    },

    /*用户登录*/

    /*ES查询*/
    search(){
       //TODO /*跳转页面404*/
      if(this.wd==''||this.wd==null){
        this.$router.push({
          path:'/404',
        })
        return
      }
      let url ='http://localhost:9090/api/search'
      let data={
        keyword:this.wd,
        page:this.currentPage,
        pageSize:this.pageSize
      }
      this.axios.post(url,data).then((response)=>{
        console.log(response)

        this.articleArr=response.data.data.list
        this.total=this.articleArr.length
      })
    },
    handleClick(tab) {
      let url="";
     switch (tab) {
        case  "first":
          /*执行文章最新查询*/
          url ='http://localhost:9090/api/articles/selectNewestArticles';
          this.axios.get(url).then((response)=> {
           this.topArr=response.data.data
          })
             break;
       case  "second":
         /*执行热门文章查询*/
         url ='http://localhost:9090/api/articles/selectPopularArticle';
         this.axios.get(url).then((response)=> {
           this.topArr=response.data.data
         })
         break;
       case  "third":
         /*执行站长推荐查询*/
         url ='http://localhost:9090/api/articles/selectIsRecommendArticle';
         this.axios.get(url).then((response)=> {
           this.topArr=response.data.data
         })
         break;
     }

    },

    handleCurrentChange: function (val) {
      this.pageNo = val
      this.ArticleQueryList();
    },
    /*标签详情跳转*/
    tagDetail(index){
      this.$router.push({
        path:'/tagArticle',
        query: {
          id:index
        }
      })
    },
    /*个人中心跳转*/
    userCenter(){

      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else{
      this.$router.push({
        path:'/userCenter',
      })

      }
    },

    /*首页*/
    localPage(){
      this.$router.push({
        path: '/',
      })
    },
    /*消息中心*/
    messageCenter(){
      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else {
        this.$router.push({
          path: '/messageCenter',
        })
      }
    },
    /*分类详情跳转*/
    categoryDetail(index){
      this.$router.push({
        path:'/category',
        query: {
          id:index
        }
      })
    },
    //文章详情跳转
    sentMesg(index){
      this.$router.push({
        path:'/detail',
        query: {
          id:index
        }
      })
    },
    /*文章发布*/
    publish(){
      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else {
        this.$router.push({
          path: '/publish',
        })
      }
    },
    /*登录*/
    login() {
      switch (this.log) {
        case "登录":
          this.$router.push({
            path:'/login',
          })
            this.log='退出登录'
          break;

        case "退出登录":
          this.$confirm('是都退出当前登录用户?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem("jwt"),
                //刷新页面
                setTimeout(()=>{
                  this.$router.push('/');
                  //延迟时间：0.8秒
                },800)
            this.log='登录'
            this.Token=''
             this.avatarUrl='https://laochengdu.oss-cn-chengdu.aliyuncs.com/2022-07-18/66bac3e7-22da-49b4-b27d-23405739eafa.jpg'

          });
          break
      }
    },


    // 查询消息数量
    countAllSizeMounted() {
      // this.Token = localStorage.getItem("jwt")
      if (this.Token === null || this.Token===''){
        return
      }
      this.axios.get("http://localhost:9090/system/message/push/ReadStatusCount").then((response) => {
        if (response.data !== 0) {
          this.countAllSize = response.data
        }
      })
    },
    // 设置所有消息为已读
    countAllSizeMountedClick(){
      if (this.countAllSize !== '' ){
        this.axios.get("http://localhost:9090/system/message/push/updateReadStatusAll");
      }

      this.$router.push('/MessagePushView');
    },
  }
}

/*天气插件*/
window.WIDGET = {
  CONFIG: {
    "layout": 2,
    "width": "400",
    "height": "270",
    "background": 2,
    "dataColor": "000000",
    "key": "a43e4a0ec86e4cfe84da011f5b69abfe"    // 改成自己的
  }
};
</script>


<style>
/*.bg{*/
/*  background: url('https://ts1.cn.mm.bing.net/th/id/R-C.51676491f69a1c1b3b043035c7565760?rik=ahRHaUMH3E02lg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fb%2f2019%2f09-13%2f69781%2fbeijing_pic_69781_1200_600.jpg&ehk=F9XpXpcQR%2f3zuIkcEWrvMl8myfV4bm%2fwfw4lDwMbVy8%3d&risl=&pid=ImgRaw&r=0') no-repeat;*/
/*  background-size: 100% 100%;*/
/*}*/
.el-header {
  background-color: #cedebd;

  width: 100%;
  height: 150px;
  color: white;
  text-align: left;
  line-height: 60px;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


.blog-wrapper {
  position: sticky;
  top: 10px;
}
.blog-card {
  line-height: 2;
  padding: 1.25rem 1.5rem;
}
.web-info {
  padding: 0.25rem;
  font-size: 0.875rem;
}

</style>